<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="profile-card">
        <div class="profile-container">
          <div class="profile-header">
            <el-avatar :size="120" :src="userInfo.avatar" class="avatar">
              <i class="el-icon-user-solid" style="font-size: 60px;"></i>
            </el-avatar>
            <div class="profile-info">
              <h2 class="username">{{ userInfo.username }}</h2>
              <p class="user-bio">{{ userInfo.bio }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-number">{{ userInfo.stats.articles }}</span>
                  <span class="stat-label">文章</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userInfo.stats.views }}</span>
                  <span class="stat-label">阅读</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userInfo.stats.likes }}</span>
                  <span class="stat-label">点赞</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userInfo.stats.comments }}</span>
                  <span class="stat-label">评论</span>
                </div>
              </div>
            </div>
          </div>
          
          <el-divider></el-divider>
          
          <div class="profile-content">
            <el-tabs v-model="activeTab" type="card">
              <el-tab-pane label="我的文章" name="articles">
                <div class="tab-content">
                  <el-table :data="userArticles" style="width: 100%">
                    <el-table-column prop="title" label="标题" width="300">
                      <template slot-scope="scope">
                        <el-button type="text" @click="goToArticle(scope.row.id)">{{ scope.row.title }}</el-button>
                      </template>
                    </el-table-column>
                    <el-table-column prop="category" label="分类" width="120"></el-table-column>
                    <el-table-column prop="views" label="阅读量" width="100"></el-table-column>
                    <el-table-column prop="date" label="发布时间" width="180"></el-table-column>
                    <el-table-column label="操作" width="150">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="editArticle(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteArticle(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="我的收藏" name="favorites">
                <div class="tab-content">
                  <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="8" v-for="item in userFavorites" :key="item.id" class="favorite-item">
                      <el-card shadow="hover" @click.native="goToArticle(item.id)">
                        <div class="favorite-title">{{ item.title }}</div>
                        <div class="favorite-meta">
                          <span>{{ item.date }}</span>
                          <span>{{ item.views }} 阅读</span>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="我的评论" name="comments">
                <div class="tab-content">
                  <div v-for="comment in userComments" :key="comment.id" class="comment-item">
                    <el-card shadow="hover">
                      <div class="comment-header">
                        <span class="comment-article" @click="goToArticle(comment.articleId)">{{ comment.articleTitle }}</span>
                        <span class="comment-date">{{ comment.date }}</span>
                      </div>
                      <div class="comment-content">{{ comment.content }}</div>
                    </el-card>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="个人设置" name="settings">
                <div class="tab-content">
                  <el-form :model="userSettings" label-width="120px">
                    <el-form-item label="用户名">
                      <el-input v-model="userSettings.username"></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介">
                      <el-input v-model="userSettings.bio" type="textarea" :rows="3"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="userSettings.email"></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                      <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                      >
                        <img v-if="userSettings.avatar" :src="userSettings.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="saveSettings">保存设置</el-button>
                      <el-button @click="resetSettings">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      activeTab: 'articles',
      userInfo: {
        username: '用户名',
        bio: '这是一段个人简介',
        avatar: 'https://via.placeholder.com/120',
        stats: {
          articles: 25,
          views: 12500,
          likes: 320,
          comments: 180
        }
      },
      userArticles: [
        {
          id: 1,
          title: 'Vue3 组合式API深度解析',
          category: '前端开发',
          views: 1250,
          date: '2024-12-15'
        },
        {
          id: 2,
          title: 'JavaScript异步编程实践',
          category: '前端开发',
          views: 980,
          date: '2024-12-10'
        },
        {
          id: 3,
          title: 'React Hooks最佳实践',
          category: '前端开发',
          views: 1100,
          date: '2024-12-05'
        }
      ],
      userFavorites: [
        {
          id: 4,
          title: 'Spring Boot微服务架构',
          date: '2024-11-25',
          views: 850
        },
        {
          id: 5,
          title: 'MySQL性能优化技巧',
          date: '2024-11-20',
          views: 720
        }
      ],
      userComments: [
        {
          id: 1,
          articleId: 1,
          articleTitle: 'Vue3 组合式API深度解析',
          content: '这是一条很有用的评论，学到了很多！',
          date: '2024-12-16'
        },
        {
          id: 2,
          articleId: 2,
          articleTitle: 'JavaScript异步编程实践',
          content: '感谢分享，期待更多内容！',
          date: '2024-12-11'
        }
      ],
      userSettings: {
        username: '用户名',
        bio: '这是一段个人简介',
        email: 'example@email.com',
        avatar: 'https://via.placeholder.com/120'
      }
    }
  },
  methods: {
    goToArticle(id) {
      this.$router.push({
        path: '/cmsBlog',
        query: { id }
      })
    },
    editArticle(id) {
      this.$message.info('编辑功能开发中')
    },
    deleteArticle(id) {
      this.$confirm('确定要删除这篇文章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    handleAvatarSuccess(res, file) {
      this.userSettings.avatar = URL.createObjectURL(file.raw)
    },
    saveSettings() {
      this.$message.success('设置保存成功')
    },
    resetSettings() {
      this.$message.info('设置已重置')
    }
  }
}
</script>

<style scoped>
.profile-card {
  margin-top: 20px;
}

.profile-container {
  padding: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 30px 0;
}

.avatar {
  margin-right: 30px;
  border: 4px solid #409eff;
}

.profile-info {
  flex: 1;
}

.username {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 28px;
}

.user-bio {
  color: #909399;
  font-size: 16px;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.profile-content {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
  min-height: 300px;
}

.favorite-item {
  margin-bottom: 20px;
}

.favorite-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 10px;
  cursor: pointer;
}

.favorite-title:hover {
  color: #409eff;
}

.favorite-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.comment-item {
  margin-bottom: 15px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-article {
  color: #409eff;
  cursor: pointer;
  font-weight: bold;
}

.comment-article:hover {
  text-decoration: underline;
}

.comment-date {
  color: #909399;
  font-size: 12px;
}

.comment-content {
  color: #606266;
  line-height: 1.6;
}

.avatar-uploader {
  text-align: left;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}

@media screen and (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .user-stats {
    justify-content: center;
    gap: 20px;
  }
  
  .tab-content {
    padding: 10px 0;
  }
}
</style>

